<template>
  <a-layout class="w-full h-full">
    <Header />
    <a-layout-content>
      <a-layout class="h-full p-2">
        <router-view :key="routeKey">
          <template #default="{ Component, route }">
            <transition name="fade" mode="out-in">
              <component :is="Component" :key="route.path" />
            </transition>
          </template>
        </router-view>
      </a-layout>
    </a-layout-content>
  </a-layout>
</template>
<script setup>
import useApptore from '@/store/app'
import Header from './Header.vue'

const appStore = useApptore()
const routeKey = ref('')
watch(
  () => appStore.ORG_CODE,
  (val) => {
    val && (routeKey.value = val)
  },
  { immediate: true }
)
</script>
<style lang="less" scoped>
/* 渐变设置 */
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-enter-to,
.fade-leave-from {
  opacity: 1;
}
.fade-enter-active {
  transition: all 0.2s ease;
}
.fade-leave-active {
  transition: none;
}
</style>
